<template>
  <section>
    <van-sticky>
      <PageHeader title="审核管理"/>
    </van-sticky>

    <form action="/">
      <van-search
        v-model="keywords"
        placeholder="请输入搜索关键词"
        @search="onSearch"
      />
    </form>

    <van-tabs v-model="type" sticky scrollspy @change="onTabChange">
      <van-tab title="婚姻" name="marriage">
        <van-list
          class="mt10"
          v-model="loading"
          :finished="finished"
          finished-text="没有更多了"
          @load="requestData" v-if="type=='marriage'">
          <div class="flex flex-col md10 bg-color-white pd10 mb10 auth-item" v-for="(item, index) in dataList" :key="index">
            <div class="flex flex-row flex-centerV">
              <img :src="item.user.avatar_url ? item.user.avatar_url : BASE_STATIC_URL + 'images/mp/avatar.jpeg'" class="flex avatar" />
              <div class="flex flex-row flex-left flex-1 pl10 font-common">{{item.user.nick}}</div>
            </div>

            <div class="flex flex-row flex-center mt5">
              <img :src="item.marriage_auth_file_url" class="w100" @click="showPic(item.marriage_auth_file_url)" />
            </div>

            <div class="flex flex-row flex-center pt10 mt10 pb10 border-top-gray font-common">
              <div class="flex flex-row flex-center flex-1 border-right-gray">
                <i class="iconfont icon-tongguo" @click="approve(index)">通过</i>
              </div>

              <div class="flex flex-row flex-center flex-1">
                <i class="iconfont icon-weitongguo" @click="reject(index)">不通过</i>
              </div>
            </div>
          </div>
        </van-list>
      </van-tab>
      <van-tab title="学历" name="education">
        <van-list
          class="mt10"
          v-model="loading"
          :finished="finished"
          finished-text="没有更多了"
          @load="requestData" v-if="type=='education'">
          <div class="flex flex-col md10 bg-color-white pd10 mb10 auth-item" v-for="(item, index) in dataList" :key="index">
            <div class="flex flex-row flex-centerV">
              <img :src="item.user.avatar_url ? item.user.avatar_url : BASE_STATIC_URL + 'images/mp/avatar.jpeg'" class="flex avatar" />
              <div class="flex flex-row flex-left flex-1 pl10 font-common">{{item.user.nick}}</div>
            </div>

            <div class="flex flex-row flex-center mt5">
              <img :src="item.education_auth_file_url" class="w100" @click="showPic(item.education_auth_file_url)" />
            </div>

            <div class="flex flex-row flex-center pt10 mt10 pb10 border-top-gray font-common">
              <div class="flex flex-row flex-center flex-1 border-right-gray">
                <i class="iconfont icon-tongguo" @click="approve(index)">通过</i>
              </div>

              <div class="flex flex-row flex-center flex-1">
                <i class="iconfont icon-weitongguo" @click="reject(index)">不通过</i>
              </div>
            </div>
          </div>
        </van-list>
      </van-tab>
      <van-tab title="房产" name="house">
        <van-list
          class="mt10"
          v-model="loading"
          :finished="finished"
          finished-text="没有更多了"
          @load="requestData" v-if="type=='house'">
          <div class="flex flex-col md10 bg-color-white pd10 mb10 auth-item" v-for="(item, index) in dataList" :key="index">
            <div class="flex flex-row flex-centerV">
              <img :src="item.user.avatar_url ? item.user.avatar_url : BASE_STATIC_URL + 'images/mp/avatar.jpeg'" class="flex avatar" />
              <div class="flex flex-row flex-left flex-1 pl10 font-common">{{item.user.nick}}</div>
            </div>

            <div class="flex flex-row flex-center mt5">
              <img :src="item.house_auth_file_url" class="w100" @click="showPic(item.house_auth_file_url)" />
            </div>

            <div class="flex flex-row flex-center pt10 mt10 pb10 border-top-gray font-common">
              <div class="flex flex-row flex-center flex-1 border-right-gray">
                <i class="iconfont icon-tongguo" @click="approve(index)">通过</i>
              </div>

              <div class="flex flex-row flex-center flex-1">
                <i class="iconfont icon-weitongguo" @click="reject(index)">不通过</i>
              </div>
            </div>
          </div>
        </van-list>
      </van-tab>
      <van-tab title="汽车" name="car">
        <van-list
          class="mt10"
          v-model="loading"
          :finished="finished"
          finished-text="没有更多了"
          @load="requestData" v-if="type=='car'">
          <div class="flex flex-col md10 bg-color-white pd10 mb10 auth-item" v-for="(item, index) in dataList" :key="index">
            <div class="flex flex-row flex-centerV">
              <img :src="item.user.avatar_url ? item.user.avatar_url : BASE_STATIC_URL + 'images/mp/avatar.jpeg'" class="flex avatar" />
              <div class="flex flex-row flex-left flex-1 pl10 font-common">{{item.user.nick}}</div>
            </div>

            <div class="flex flex-row flex-center mt5">
              <img :src="item.car_auth_file_url" class="w100" @click="showPic(item.car_auth_file_url)" />
            </div>

            <div class="flex flex-row flex-center pt10 mt10 pb10 border-top-gray font-common">
              <div class="flex flex-row flex-center flex-1 border-right-gray">
                <i class="iconfont icon-tongguo" @click="approve(index)">通过</i>
              </div>

              <div class="flex flex-row flex-center flex-1">
                <i class="iconfont icon-weitongguo" @click="reject(index)">不通过</i>
              </div>
            </div>
          </div>
        </van-list>
      </van-tab>
      <van-tab title="会员头像" name="user_avatar"></van-tab>
      <van-tab title="形象照" name="member_photo"></van-tab>
      <van-tab title="会员照片" name="member_image"></van-tab>
    </van-tabs>
  </section>
</template>

<script>
  import Vue from 'vue';
  import {Toast, Dialog, List, Search, Sticky, Tab, Tabs, ImagePreview} from 'vant';
  import {BASE_STATIC_URL, memberAuthApproveUri, memberAuthListsUri, memberAuthRejectUri} from "../../../common/api";
  import PageHeader from "../../componets/PageHeader";
  Vue.use(Toast).use(Dialog).use(List).use(Search).use(Sticky).use(Tab).use(Tabs).use(ImagePreview);

  export default {
    components: {
      PageHeader
    },
    data() {
      return {
        BASE_STATIC_URL: BASE_STATIC_URL,
        type: 'marriage',
        currentPage: 1,
        lastPage: 0,
        total: 0,
        pageSize: 10,
        loading: false,
        finished: false,
        dataList: [],
        keywords: ''
      }
    },
    methods: {
      onTabChange(name) {
        if(name == 'user_avatar') {
          this.$router.replace({name: 'MemberAuthUserAvatar'});
        } else if(name == 'member_photo') {
          this.$router.replace({name: 'MemberAuthMemberPhoto'});
        } else if(name == 'member_image') {
          this.$router.replace({name: 'MemberAuthMemberImage'});
        } else {
          this.type = name;
          this.keywords = '';
          this.onSearch();
        }
      },
      showPic(picUrl) {
        ImagePreview([picUrl]);
      },
      onSearch() {
        this.currentPage = 1;
        this.lastPage = 0;
        this.total = 0;
        this.loading = false;
        this.finished = false;
        this.dataList = [];
        this.requestData();
      },
      requestData() {
        const that = this;
        this.loading = true;
        const url = memberAuthListsUri + '?page_size=' + that.pageSize + '&page=' + that.currentPage + '&type='+that.type+'&keywords=' + encodeURIComponent(that.keywords);
        this.$http.get(url).then(response => {
          let {code, msg, data} = response.body
          if (code != 0) {
            Toast.fail(msg);
          } else {
            that.loading = false;
            if (that.currentPage >= data.last_page) {
              that.finished = true;
            }
            that.currentPage = that.currentPage + 1;
            for (let i = 0; i < data.data.length; i++) {
              that.dataList.push(data.data[i]);
            }
            that.total = data.total;
            that.lastPage = data.last_page;
          }
        }, response => {
          // error callback
        })
      },
      approve(index) {
        const that = this;
        const url = memberAuthApproveUri + '?id=' + that.dataList[index].id + '&type='+that.type;
        this.$http.get(url).then(response => {
          let {code, msg, data} = response.body
          if (code != 0) {
            Toast.fail(msg);
          } else {
            that.dataList.splice(index, 1);
          }
        }, response => {
          // error callback
        })
      },
      reject(index) {
        const that = this;
        const url = memberAuthRejectUri + '?id=' + that.dataList[index].id + '&type='+that.type;
        this.$http.get(url).then(response => {
          let {code, msg, data} = response.body
          if (code != 0) {
            Toast.fail(msg);
          } else {
            that.dataList.splice(index, 1);
          }
        }, response => {
          // error callback
        })
      }
    },
    mounted: function () {
      this.requestData();
    }
  }
</script>

<style scoped>
  .auth-item .avatar {
    height: 20px;
    width: 20px;
    border-radius: 10px;
  }
</style>
